<template>
  <view class="settle-container">
    <view class="main-box">
      <view class="radio">
        <radio color="#42b983" :checked="isFullCheck" @click="checkAllHandle">全选</radio>
      </view>
      <view class="settle-sum">
        总计：<text>￥{{checkedGoodsAmount}}</text>
      </view>
      <view class="settle-pay" @click="goSettle">结算({{checkedCount}})</view>
    </view>
  </view>
</template>

<script>
  import {mapGetters, mapMutations,mapState} from 'vuex'
  export default {
    name:"mySettle",
    data() {
      return {
        
      };
    },
    computed:{
      ...mapState('my_cart',['cart']),
      ...mapState('my_user',['token']),
      ...mapGetters('my_cart',['checkedCount','total','checkedGoodsAmount']),
      // 全选按钮
      isFullCheck(){
        return this.total === this.checkedCount
      }
    },
    methods:{
      ...mapMutations('my_cart',['updateAllStatus']),
      // 全选按钮事件
      checkAllHandle(){
        this.updateAllStatus(!this.isFullCheck)
      },
      // 结算按钮点击事件
      goSettle(){
        if(!this.checkedCount) return uni.showToast({title:"请选择商品！",icon: 'none'})
        if(!this.token) {
          uni.showToast({
                title:"即将跳转到登录页面...",
                duration: 2000,
                icon: 'none'
              })
          setTimeout(()=>{
            uni.switchTab({
              url:'/pages/my/my'
            })
          },3000)
        }
         setTimeout(()=>{uni.$showMsg("支付成功！")},2000)
        
      },
      // 支付方法(开发者权限不足，只在此声明了方法，并没有调用)
   async payOrder() {
     // 1. 创建订单
     // 1.1 组织订单的信息对象
     const orderInfo = {
       // 开发期间，注释掉真实的订单价格, order_price: this.checkedGoodsAmount,
       order_price: 0.01,
       consignee_addr: this.addstr,
       goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
     }
     // 1.2 发起请求创建订单
     const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
     if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
     // 1.3 得到服务器响应的“订单编号”
     const orderNumber = res.message.order_number
      // 2. 订单预支付
      // 2.1 发起请求获取订单的支付信息
      const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
      // 2.2 预付订单生成失败
      if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
      // 2.3 得到订单支付相关的必要参数
      const payInfo = res2.message.pay   
      // 3. 发起微信支付
      // 3.1 调用 uni.requestPayment() 发起微信支付
      const [err, succ] = await uni.requestPayment(payInfo)
      // 3.2 未完成支付
      if (err) return uni.$showMsg('订单未支付！')
      // 3.3 完成了支付，进一步查询支付的结果
      const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
      // 3.4 检测到订单未支付
      if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
      // 3.5 检测到订单支付完成
      uni.showToast({
        title: '支付完成！',
        icon: 'success'
      })
    }
    }
  }
</script>

<style lang="scss">
.settle-container{
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #efefef;
  z-index: 999;
  .main-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    padding-left: 5px;
    font-size: 12px;
    border-top: #efefef 1px solid;
    .settle-sum{
      
      text{
        color: red;
        font-weight: bold;
      }
    }
    .settle-pay{
      background-color: #42b983;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: white;
      width: 100px;
      transform: translateX(20%);
    }
  }
}
</style>